<template>
  <div class="group-detail">
    <div class="bg">
      <section class="group_goods" :class="is_success == 0?'group_goods_error':''">
        <section class="group_img">
          <a href="javascript:;" @click="openLink(link)">
            <img
              :src="item_info.is_compress?`${item_info.pic_url}80x80`:item_info.pic_url"
              :alt="item_info.title"
            />
          </a>
        </section>
        <section class="group_info">
          <a href="javascript:;" @click="openLink(link)" class="title">{{item_info.title}}</a>
          <p class="goods_sku" v-if="item_info.props">
            {{item_info.props}}
            <i v-if="last_sku_prop_show">（还差规格：{{last_sku_prop_show}}）</i>
          </p>
          <!-- 阶梯式团加入 -->
          <section class="group_bottom" v-if="groupShoppingInfo.aggregation_type == 2">
            <span class="num">已有{{count}}人参团：</span>
            <span class="price" v-html="scaleGoodsPriceFn(now_price)"></span><span>（当前价）</span>
          </section>
          <section class="group_bottom" v-else>
            <span
              v-if="groupShoppingInfo.type == 2 && groupShoppingInfo.buy_num"
              class="num"
            >{{groupShoppingInfo.buy_num}}数量团：</span>
            <span class="num" v-else>{{groupShoppingInfo.num}}人团：</span>

            <span class="price"  v-html="scaleGoodsPriceFn(item_info.price)"></span>
            <b style="color:orange;" v-html="typeText"></b>
          </section>
        </section>
      </section>

      <section class="group_status group_success" v-if="is_success == 1">
        <div class="title">
          <i></i>拼团成功
        </div>
          <!--  定制十人团 不显示 此文案    -->
        <p v-if="!istendz">我们会尽快为您发货，请耐心等待</p>
        <img class="tengroupImg" v-if="istendz && is_ten_win" src="https://img.wifenxiao.com/h5-wfx/images/DZ/tengroup/tSuccess.png">
        <img class="tengroupImg" v-if="istendz && !is_ten_win" src="https://img.wifenxiao.com/h5-wfx/images/DZ/tengroup/tFail.png">
      </section>
      <section class="group_status group_error" v-else-if="is_success == 0">
        <div class="title">
          <i></i>拼团失败
        </div>
        <p>您晚来了一步~</p>
      </section>
      <template v-else-if="is_success == 2">
        <section class="group_tuxedoSuccess" v-if="!(groupShoppingInfo.type == 2 && groupShoppingInfo.buy_num)">
          <h2>
            <img src="https://img.wifenxiao.com/h5-wfx/images/groupshop/group_success.png">
            <span>参团成功</span>
          </h2>
          <!--   十人团定制 不显示此文案    -->
          <p v-if="!istendz">我们会尽快为你发货，请耐心等待</p>
        </section>
      </template>

      <section class="group_tuxedoSuccess" v-if="!(groupShoppingInfo.type == 2 && groupShoppingInfo.buy_num)">
        <div class="group_tuxedoSuccess_member">
          <section class="tuan_avatar" v-if="tuan_order && groupShoppingInfo.aggregation_type == 1"><img :src="tuan_order.avatar?tuan_order.avatar:defaultBg" /></section>
          <section class="tuan_user" v-for="(item, index) in groupShoppingOrder" :key="item+index"><img :src="item.avatar?item.avatar:defaultBg" /><span class="tuan_jp" v-if="item.direct_drive_name && groupShoppingInfo.aggregation_type == 4">{{item.direct_drive_name}}</span></section>
          <template v-if="group_placeholder_num > 0">
            <section v-for="(placeholderNum, placeholderInd) in group_placeholder_num" :key="placeholderNum+placeholderInd">
              <img v-if="groupShoppingInfo.num > 10 && placeholderNum==group_placeholder_num" src="https://img.wifenxiao.com/h5-wfx/images/groupshop/group_more.png" alt="">
              <img v-else src="https://img.wifenxiao.com/h5-wfx/images/groupshop/group_placeholder.png" alt="">
            </section>
          </template>
        </div>
      </section>

      <section class="fixed_action" v-if="!istendz">
        <template v-if="is_success == 2 && !is_show_lucky_draw">
            <wx-button open-type="share" class="wx_group_btn"><van-button round id="fxBtn-share" class="group_btn">{{btnText}}</van-button></wx-button>
        </template>
        <van-button round v-else-if="is_success == 1 && groupShoppingInfo.aggregation_type == 3 && is_show_lucky_draw && is_lucky_draw == 0" id="fxBtn-share" class="group_btn" @click="clickPrize">拼团成功，点击抽奖</van-button>
        <van-button round v-else-if="is_success == 1 && groupShoppingInfo.aggregation_type == 3 && is_show_lucky_draw && is_lucky_draw == 1" id="fxBtn-share" class="group_btn">拼团成功，已抽奖</van-button>
        <van-button round v-else id="fxBtn-share" class="group_btn disabled">邀请好友参团</van-button>
      </section>

      <section class="success_txt" v-if="groupShoppingInfo.aggregation_type == 1 && tuan_order">对于各位大侠的相助，团长感激涕零</section>

      <section class="group_member_info">
        <section
          class="member_item"
          v-if="tuan_order && groupShoppingInfo.aggregation_type == 1"
        >
          <section class="img-box tuan">
            <img :src="tuan_order.avatar?tuan_order.avatar:defaultBg" />
          </section>
          <section class="nickname">{{tuan_order.nickname}}</section>
          <section class="time">{{tuan_order.add_time}}参团</section>
        </section>
        <section
          class="member_item"
          v-for="(item, index) in groupShoppingOrder"
          :key="index"
        >
          <section class="img-box">
            <img :src="item.avatar?item.avatar:defaultBg" />
          </section>
          <section class="nickname">{{item.nickname}}</section>
          <section class="time">
            <section>{{item.add_time}}参团</section>
            <section v-if="item.direct_drive_name && item.returnCost">{{item.direct_drive_name}}奖励{{item.returnCost}}元</section>
          </section>
        </section>
      </section>
    </div>
    <share-image ref="shareImage"></share-image>
    <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
    <!--抽奖弹窗-->
    <van-popup v-model="showPrizeResult" :style="{ background: 'transparent' }">
      <div class="group-prize-wrapper" :class="getPrize ? 'success': 'fail'">
        <div class="group-prize-wrap">
          <div class="group-prize" v-if="getPrize">
            <img :src="item_info.pic_url"/>
            <p>{{ prizeResultText }}</p>
          </div>
          <div class="group-no-prize" v-else>
            <img src="https://img.wifenxiao.com/h5-wfx/images/item/group/group-prize-losing.png"/>
            <p>{{ prizeResultText }}</p>
          </div>
        </div>
        <p class="group-prize-btn" @click="closePrizeResult">确定</p>

        <p class="group-prize-records" @click="JumpName('groupPrize',{order_id:order_id,group_shopping_id:groupShoppingInfo.id})">中奖名单</p>
      </div>
      <div class="prize-close" @click="closePrizeResult">
        <img src="https://img.wifenxiao.com/h5-wfx/images/item/group/group-prize-close.png" alt="">
      </div>
    </van-popup>

    <!--  十人团 定制 拼团状态弹窗 start  -->
    <div class="ten-group-popup-wrap" v-if="istendz && isDzTenGroupSuccess && groupShoppingOrder.length >= 10">
      <div class="ten-group-popup-main">
        <img src="https://img.wifenxiao.com/h5-wfx/images/DZ/shirentuan/tan1.png">
        <div class="ten-group-popup-content">
          <img src="https://img.wifenxiao.com/h5-wfx/images/DZ/shirentuan/tan2.png">
          <p>商家会尽快为您发货哦～</p>
          <div class="ten-group-popup-content-headerImg">
            <img v-for="(item, index) in groupShoppingOrder"
                 :key="index"
                 :src="item.avatar?item.avatar:defaultBg">
          </div>
          <div class="ten-group-popup-content-btn" @click="dzTenGroupCLoseClick">我知道了</div>
        </div>
      </div>
    </div>
    <div class="ten-group-popup-wrap" v-if="istendz && isDzTenGroupFailed && groupShoppingOrder.length >= 10">
      <div class="ten-group-popup-main">
        <img src="https://img.wifenxiao.com/h5-wfx/images/DZ/shirentuan/tan3.png">
        <div class="ten-group-popup-content ten-group-popup-content-faile">
          <img class="faile-title-img" src="https://img.wifenxiao.com/h5-wfx/images/DZ/shirentuan/tan4.png">
          <p>{{subsidyMoney}}</p>
          <p>祝好运常伴您~</p>
          <div class="ten-group-popup-content-headerImg">
            <img v-for="(item, index) in groupShoppingOrder"
                 :key="index"
                 :src="item.avatar?item.avatar:defaultBg">
          </div>
          <div class="ten-group-popup-content-btn ten-group-popup-content-btn-faile" @click="dzTenGroupCLoseClick">我知道了</div>
        </div>
      </div>
    </div>
    <!--  十人团 定制 拼团状态弹窗 end  -->
    <!--  十人团 定制 拼团页面刷新按钮 start  -->
    <img v-if="istendz" @click="refreshClick" class="refreshDzImg" style="width: 42px;height: 42px;position: fixed;right:15px;bottom: 38px" src="https://img.wifenxiao.com/h5-wfx/images/DZ/shirentuan/refresh.png">
    <!--  十人团 定制 拼团页面刷新按钮 start  -->
  </div>
</template>

<script>
import shareImage from '@/components/wxShare/shareImage'

import small from '@/smallapp/small'
import { groupDetail, groupReward } from '@/api/item/activity'
import { scaleGoodsPrice } from '@/utils/index'
import { openPage, mpShare} from '@/utils/utils'
import SmallLogin from '@/components/SmallLogin/smallLogin'
import Vue from 'vue'
export default Vue.extend({
  comments: {
    SmallLogin,
    shareImage
  },
  data() {
    return {
      shareInfo: {},
      defaultBg:'https://img.wifenxiao.com/h5-wfx/images/default_avatar.jpg',
      is_success: 2,
      link: '',
      item_info: {},
      last_sku_prop_show: '',
      order_id: '',
      groupShoppingInfo: {},
      count: 1,
      now_price: 10,
      tuan_no_pay: 1,
      tuan_order: {},
      groupShoppingOrder: [],
      tuanOrderInfo: {},
      group_left: 0,
      group_placeholder_num: 0,
      showPrizeResult: false,
      getPrize: false,
      prizeResultText: '',
      is_show_lucky_draw: 0, // 是否展示抽奖按钮
      is_lucky_draw: 0, // 是否已抽奖
      istendz: false, // 十人团定制
      is_ten_win: 0, // 十人团定制 是否中奖
      isDzTenGroupSuccess: false, // 定制十人团弹窗 成功
      isDzTenGroupFailed: false, // 定制十人团弹窗 失败
      subsidyMoney: 0 // 定制十人团弹窗 失败 补贴金额
    }
  },
  methods: {
    /**
       * 商品价格 整数放大
       */
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className)
    },
    openLink(link){
      openPage(link)
    },
    JumpName(name, data) {
      this.$JumpName(this, name, data)
    },
    init() {
      this.order_id = this.$route.query.id
      const params = {
        id: this.$route.query.id,
        payOrder: this.$route.query.payOrder,
        label_type: this.$route.query.label_type,
        page: this.$route.query.page
      }
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)

      groupDetail(params).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data.data
          this.is_show_lucky_draw = resData.is_show_lucky_draw
          this.is_lucky_draw = resData.is_lucky_draw
          this.is_success = resData.is_success
          this.link = resData.link
          this.item_info = resData.item_info
          this.last_sku_prop_show = resData.last_sku_prop_show
          this.groupShoppingInfo = resData.groupShoppingInfo
          this.count = resData.count
          this.now_price = resData.now_price
          this.tuan_no_pay = resData.tuan_no_pay
          this.tuan_order = resData.tuan_order
          this.groupShoppingOrder = resData.groupShoppingOrder || []
          this.tuanOrderInfo = resData.tuanOrderInfo
          this.group_left = resData.group_left
          this.shareInfo.jsapi_title=resData.jsapi_title
          this.shareInfo.jsapi_img=resData.jsapi_img
          this.shareInfo.jsapi_url=resData.jsapi_url
          // 计算参团虚位位数
          if (this.groupShoppingInfo.num >= 10) {
            if (this.tuan_order && this.groupShoppingInfo.aggregation_type == 1) {
              this.group_placeholder_num = 10 - (this.groupShoppingOrder.length + 1)
            } else {
              this.group_placeholder_num = 10 - this.groupShoppingOrder.length
            }
          } else {
            if (this.tuan_order && this.groupShoppingInfo.aggregation_type == 1) {
              this.group_placeholder_num = this.groupShoppingInfo.num - (this.groupShoppingOrder.length + 1)
            } else {
              this.group_placeholder_num = this.groupShoppingInfo.num - this.groupShoppingOrder.length
            }
          }
          // 十人团定制
          if (resData.groupShoppingInfo && resData.groupShoppingInfo.aggregation_type == 6) {
            this.istendz = true
            if (resData.is_ten_win) {
              this.is_ten_win = 1
              this.isDzTenGroupSuccess = true
              this.isDzTenGroupFailed = false
            } else {
              this.is_ten_win = 0
              this.isDzTenGroupSuccess = false
              this.isDzTenGroupFailed = true
              this.subsidyMoney = resData.subsidyMoney || 0
            }
          }
          // TODO 小程序分享
          const option = {
            title: resData.jsapi_title,
            imgUrl: resData.jsapi_img,
            shareParam: resData.jsapi_url.split('?')[1]
          }
          mpShare (true, false, '/goods/pages/itemGroup/index', option,'/item-group')
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 点击立即分享
    clickShare() {
      this.$refs.shareImage.showShade = true
    },
    // 点击抽奖
    clickPrize() {
      const params = {
        order_id: this.order_id,
        group_shopping_id: this.groupShoppingInfo.id
      }
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      groupReward(params).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.getPrize = true
        } else if (res.status == 2) {
          this.getPrize = false
        } else {
          this.$Error(res.msg)
        }
        if (res.status == 1 || res.status == 2) {
          this.prizeResultText = res.msg
          this.showPrizeResult = true
        }
      })
    },
    // 关闭抽奖弹窗
    closePrizeResult() {
      this.showPrizeResult = false
      this.init()
    },
    dzTenGroupCLoseClick() {
      this.isDzTenGroupSuccess = false
      this.isDzTenGroupFailed = false
    },
    refreshClick() {
      this.$router.go()
    }
  },
  computed: {
    typeText() {
      let html = ''
      if (this.tuan_no_pay == 1) {
        html += '（团长免单'
        if (
          this.groupShoppingInfo.aggregation_type == 1 &&
          this.groupShoppingInfo.small_group_type == 1
        ) {
          html += '---老带新'
        }
        html += '）'
      }
      if (this.tuan_no_pay == 2) {
        html += `（团长价：${this.groupShoppingInfo.fixed_price}）`
      }
      return html
    },
    btnText() {
      let text = ''
      if (
        this.tuanOrderInfo.is_tuan == 0 &&
        this.groupShoppingInfo.need_all_sku == 1
      ) {
        text += '等待成团'
      } else {
        if (this.group_left && this.groupShoppingInfo.aggregation_type != 2) {
          text += `等待成团，还需邀请${this.group_left}人`
        } else {
          text += '邀请好友参团'
        }
      }
      return text
    }
  },
  created() {
    this.init()
  },
  mounted() {
      window.addEventListener('wxshow', () => {
        if (!small.checkLogin()) {
          this.$refs.smalllogin.openSmallLoginPop()
        }
      })

      window.$$subscribe('loginReload', reload => {
          if (reload) {
            this.init()
          }
      })
  },
  beforeDestroy() {
    window.$$unsubscribe('loginReload')
  }
})
</script>
<style lang="scss">
.group_goods_error{
  .price-scale{
    color:#999;
  }
}
</style>

<style lang="scss">
@import 'src/styles/variables.scss';
@import 'src/styles/mixin';
.group-detail {
  padding:20px;
  background:url("https://img.wifenxiao.com/h5-wfx/images/groupshop/group_bg.png") no-repeat;
  background-size:100%;
  .bg{
    min-height:90vh;
    padding: 24px;
    border-radius:20px;
    background:#fff;
  }
  img {
    vertical-align: middle;
  }
  .group_goods {
    display:flex;
    margin-bottom: 52px;
    &.group_goods_error{
      .group_img{
        opacity: 0.5;
      }
      .group_info{
        color:#999;
        .group_bottom{
          color:#999;
        }
      }
    }
    .group_img {
      overflow: hidden;
      width:150px;
      height:150px;
      line-height: 150px;
      border-radius:10px;
      margin-right: 20px;
      img {
        display: inline-block;
        width: 100%;
      }
    }
    .group_info {
      flex:1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        display: block;
        font-weight:bold;
        @include lineClamp(24px,32px,2);
      }
      .goods_sku {
        color: #666;
        margin: 10px 0;
      }
      .group_bottom {
        margin:20px 0 0;
        color: #F21228;
        /* .price {
        } */
      }
    }
    .show_tip {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
  .group_tuxedoSuccess{
    font-family: PingFang SC;
    text-align: center;
    h2{
      font-size: 50px;
      color: #f21228;
      line-height: 1;
      margin-bottom: 26px;
      display: flex;
      justify-content: center;
      align-items: center;
      img{
        width: 50px;
        height: 50px;
        margin-right: 16px;
      }
    }
    p{
      font-size: 26px;
      font-weight: 500;
      color: #999;
      line-height: 1;
      margin-bottom: 34px;
    }
    &_member{
      padding: 0 66px;
      margin-bottom: 14px;
      overflow: hidden;
      section{
        position: relative;
        float: left;
        width: 80px;
        height: 80px;
        margin-right: 30px;
        margin-bottom: 36px;
        &:nth-child(5n){
          margin-right: 0;
        }
        &.tuan_avatar{
          &::before{
            position: absolute;
            bottom: -12px;
            left: 50%;
            display: inline-block;
            content: "团长";
            font-size: 20px;
            color: #fff;
            width: 64px;
            height: 28px;
            line-height:28px;
            background-color: #f21228;
            border-radius: 24px;
            transform: translateX(-50%);
          }
        }
        &.tuan_user {
          position: relative;
          .tuan_jp{
            position: absolute;
            bottom: -12px;
            left: 50%;
            display: inline-block;
            font-size: 20px;
            color: #fff;
            width: 64px;
            height: 28px;
            line-height:28px;
            background-color: #f21228;
            border-radius: 24px;
            transform: translateX(-50%);
          }
        }
        >img{
          max-width: 100%;
          width: 100%;
          border-radius: 50%;
        }
      }
    }
  }
  .group_status{
    margin-top:40px;
    text-align:center;
    .title{
      font-size:50px;
      font-weight:bold;
      color:#F21228;
      i{
        display:inline-block;
        width:50px;
        height:50px;
        margin-right:14px;
        background:url("https://img.wifenxiao.com/h5-wfx/images/groupshop/group_success.png") no-repeat;
        background-size:100% 100%;
        vertical-align: -8px;
      }
    }
    &.group_error{
      .title{
        i{
          background-image:url("https://img.wifenxiao.com/h5-wfx/images/groupshop/group_error.png");
        }
      }
    }
    p{
      margin:20px 0;
      font-size:26px;
      color:#999;
    }
  }
  .fixed_action {
    margin: 14px auto 36px;
    .group_btn{
      width:100%;
      height:96px;
      border:0;
      background:linear-gradient(-90deg,rgba(233,1,4,1),rgba(254,27,73,1));
      box-shadow:0px 10px 16px 0px rgba(235,3,9,0.2);
      font-size:32px;
      color:#fff;
      &.disabled{
        background:#F5F5F5;
        box-shadow:initial;
        color:#999;
      }
    }
    .wx_group_btn{
      border-radius: 100px;
      box-shadow: 0 10rpx 16rpx 0 rgba(235,3,9,.2);
    }
  }
  .success_txt{
    font-size:26px;
    text-align:center;
    line-height:2;
  }
  .group_member_info {
    padding:0 6px;
    .member_item{
      display:flex;
      align-items:center;
      padding:30px 0;
      border-bottom:2px solid #EDEDED;
      .img-box{        
        margin-right:16px;
        img{
          display:block;
          width:80px;
          height:80px;
          border-radius:50%;
        }
        &.tuan{
          position:relative;
          img{
            border:2px solid #F21228;
          }
          &::after{
            content:"";
            position:absolute;
            right:0;
            bottom:-4px;
            width:36px;
            height:36px;
            background:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/icon_group.png") no-repeat;
            background-size:100% 100%;
          }
        }
      }
      .nickname{
        flex:1;
        font-size:26px;
      }
      .time{
        font-size:22px;
        color:#666;
      }
    }
  }
  .group-prize-wrapper {
    width: 556px;
    height: 687px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    &.success{
      background-image: url("https://img.wifenxiao.com/h5-wfx/images/item/group/group-prize-bg.png");
    }
    &.fail{
      background-image: url("https://img.wifenxiao.com/h5-wfx/images/item/group/group-prize-bg2.png");
    }
    .group-prize-wrap {
      height:460px;
      padding: 205px 108px 0;
      .group-prize, .group-no-prize {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img {
          width: 113px;
          height: 113px;
          margin-bottom: 30px;
        }
        p {
          padding: 0 27px;
          color: #FB3A29;
          font-size: 28px;
          text-align: center;
        }
      }
      .group-no-prize {
        img {
          width: 153px;
          height: 134px;
        }
      }
    }
    .group-prize-btn {
      width: 340px;
      height: 104px;
      margin:20px auto;
      line-height: 104px;
      text-align: center;
      color: #CC3240;
      font-size: 28px;
      background: url("https://img.wifenxiao.com/h5-wfx/images/item/group/group-prize-btn.png") no-repeat center;
      background-size: 100% 100%;
    }
    .group-prize-records{
      font-size: 28px;
      text-align:center;
      color:#fff;
    }
  }
  .prize-close{
    margin-top:30px;
    text-align: center;
    img{
      width: 76px;
      height: 76px;
    }
  }
}
/*  十人团定制*/
.tengroupImg{
  width: 614px;
  height: 120px;
  margin: 38px 0 48px 0;
}
.ten-group-popup-wrap{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  .ten-group-popup-main{
    width: 606px;
    position: relative;
    img{
      width: 100%;
    }
  }
  .ten-group-popup-content{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    overflow: hidden;
    img{
      width: 352px;
      margin-top: 212px;
    }
    p{
      font-size: 24px;
      font-family: PingFangSC;
      font-weight: normal;
      color: rgba(219,48,47,1);
      margin-top: 40px;
    }
    .ten-group-popup-content-headerImg{
      width: 444px;
      height: 151px;
      margin: auto;
      margin-top: 28px;
      img{
        width: 64px;
        height: 64px;
        margin-left: 23px;
        margin-top: 0;
        margin-bottom: 18px;
        display: block;
        float: left;
        border-radius: 50%;
      }
    }
    .ten-group-popup-content-btn{
      width: 340px;
      height: 84px;
      background: linear-gradient(90deg, rgba(245,127,26,1) 0%,rgba(249,38,35,1) 100%);
      border-radius: 42px;
      margin: 26px auto;
      text-align: center;
      font-size: 28px;
      font-family: PingFangSC;
      font-weight: 500;
      color: rgba(255,255,255,1);
      line-height: 84px;
    }
    .ten-group-popup-content-btn-faile{
      background: linear-gradient(90deg, rgba(117,133,255,1) 0%,rgba(49,166,255,1) 100%);
    }
  }
  .ten-group-popup-content-faile{
    .faile-title-img{
      margin-top: 176px !important;
      width: 496px !important;
    }
    p:nth-child(2) {
      margin-top: 12px !important;
    }
    p:nth-child(3) {
      margin-top: 4px !important;
    }
  }
}
.refreshDzImg{
  width: 84px;
  height: 84px;
  position: fixed;
  right: 30px;
  bottom: 76px;
}
</style>